<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id" :title="item.title">
          <div slot="label">
            <!-- 图片 -->
            <van-grid :border="false" :column-num="item.cover.images.length">
              <van-grid-item v-for="(img, idx) in item.cover.images" :key="idx">
                <!-- <van-image src="img" /> -->
                <van-image
                  lazy-load
                  v-if="item.cover.images.length > 1"
                  :src="img"
                />
                <van-image
                  v-else
                  lazy-load
                  width="300"
                  height="250"
                  :src="img"
                />
              </van-grid-item>
            </van-grid>
            <!-- 文职说明 -->
            <div class="mate">
              <span>作者:{{ item.aut_name }}</span>
              <span>评论{{ item.comm_count }} </span>
              <!-- <span>发布时间:{{ item.pubdate | tiemDate }}</span> -->
              <span>发布时间:{{ item.pubdate | relativeTime }}</span>
              <!-- 如果是登陆用户显示 显示关闭按钮 -->
              <span
                v-if="$store.state.tokenInfo.token"
                @click="showMoreAction(item)"
                class="close"
              >
                <van-icon name="close"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { relativeTime } from '../../utils/date-tiem';
// console.log(formateTime(Date.now()));
export default {
  // 传过来当前的频道
  props: ['channel'],
  filters: {
    tiemDate: (val) => {
      return relativeTime(val);
    }
  },
  data () {
    return {
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      tiemstamp: null
    };
  },
  created () {
    // 删除文章
    // 创建完成后监听事件总线上的delArticle 事件delArticel
    this.$eventBus.$on('delArticle', (data) => {
      console.log('我是频道', this.channel, '$on', data);
      const { articId, channelId } = data;
      if (channelId !== this.channel.id) {
        console.log('无关');
      }
      console.log('有关');
      // 在数组 中找到 某个下项 他的art_id 与 articeId ,并删除
      // findIndex 找到元素的下表  如果没找到 就返回-1 如果有返回下标
      const idx = this.list.findIndex(
        (article) => article.art_id.toString() === articId
      );

      if (idx !== -1) {
        console.log('删除文章', idx);
        this.list.splice(idx, 1);
      }
    });
  },
  methods: {
    // 子传父 传递文章编号
    showMoreAction (item) {
      console.log('000', item.art_id.toString());
      this.$emit('showMoreAction', item.art_id.toString());
    },

    // 下拉刷新
    async onRefresh () {
      try {
        const res = await this.api.articles(this.channel.id, Date.now());
        const arr = res.data.data.results;
        this.$toast.success('刷新成功');
        this.list = arr.concat(this.list);

        this.isLoading = false;
      } catch (err) {
        this.$toast.fail('刷新失败');
      }

      //   setTimeout(() => {
      //     this.$toast.success("刷新成功");
      //     this.isLoading = false;
      //   }, 1000);
    },
    // 请求文章
    onLoad () {
      console.log('12');
      if (!this.tiemstamp) {
        this.tiemstamp = Date.now();
      }
      this.api.articles(this.channel.id, this.tiemstamp).then((res) => {
        console.log('521', res);
        // 保存本次请求回来的时间戳
        this.tiemstamp = res.data.data.pre_timestamp;
        const arr = res.data.data.results;
        // this.list = res.data.data.results;
        this.loading = false;
        this.list = this.list.concat(arr);
        if (arr.length === 0) {
          this.finished = true;
        }
      });
    }
  }
};
</script>

<style scoped lang='less'>
.van-image__img {
  width: 400px;
  height: 500px;
}
.close {
  float: right;
}
.mate {
  span {
    margin-right: 10px;
  }
}
</style>>
